<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>

    </style>
</head>
<body>

<div id="app">
    <div>
        <el-input v-model="info.stype" placeholder="请输入商品规格" style="display: inline-block;width: 200px;">
        </el-input>
        <el-button type="success" icon="el-icon-search" circle @click="searchData()"></el-button>
        <el-button type="primary" icon="el-icon-plus" circle @click="showAddGoodsCompanyDlog()"></el-button>

    </div>


    <el-table ref="multipleTable" :data="goodsCompanyArr" tooltip-effect="dark" style="width: 100%"
              >
        <el-table-column type="selection" width="55">
    </el-table-column>
        <el-table-column prop="id" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="stype" label="规格" show-overflow-tooltip>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
                <el-button type="warning" icon="el-icon-edit" circle @click="showUpdateGoodsCompanyDlog(scope.row.id)">
                </el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="deleteGoodsCompany(scope.row.id)">
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next"
                   :total="pageTotal">
    </el-pagination>


    <el-dialog title="添加商品规格" :visible.sync="addGoodsCompanyVisible" width="30%" center>
        <el-form :model="goodsCompanyInfo" status-icon :rules="rules" ref="goodsCompanyInfo" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item label="商品规格" prop="stype">
                <el-input maxlength="10" v-model="goodsCompanyInfo.stype" placeholder="请输入商品规格" autocomplete="off">
                </el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
					<el-button @click="addGoodsCompanyVisible = false">取 消</el-button>
					<el-button type="primary" @click="addGoodsCompany()">确 定</el-button>
				</span>
    </el-dialog>


    <el-dialog title="修改商品规格" :visible.sync="updateGoodsCompanyVisible" width="30%" center>
        <el-form :model="updateGoodsCompanyInfo" status-icon :rules="rules" ref="updateGoodsCompanyInfo" label-width="100px"
                 class="demo-ruleForm">
            <input v-model="updateGoodsCompanyInfo.id" type="hidden">
            <el-form-item label="商品规格" prop="stype">
                <el-input maxlength="10" v-model="updateGoodsCompanyInfo.stype" placeholder="请输入商品规格" autocomplete="off">
                </el-input>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
					<el-button @click="updateGoodsCompanyVisible = false">取 消</el-button>
					<el-button type="primary" @click="updateGoodsCompany()">确 定</el-button>
				</span>
    </el-dialog>


</div>

<script>
    var haha = new Vue({
        el: "#app",
        data: {
            info: {},
            goodsCompanyArr: [],
            pageTotal: 0,
            addGoodsCompanyVisible: false,
            updateGoodsCompanyVisible: false,
            goodsCompanyInfo: {},
            updateGoodsCompanyInfo:{},
            rules: {
                stype: [{
                    required: true,
                    message: '！至多10位字符',
                    trigger: 'blur'
                }]
            }
        },

        methods: {

            deleteGoodsCompany: function(a) {
                if(confirm("您确定要删除吗？")){
                    $.get("/cai/goodsCompany/deleteGoodsCompany/" + a, function(backData) {
                        getInfo(1, 10);
                    })
                }
            },

            updateGoodsCompany: function() {
                haha.$refs["updateGoodsCompanyInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/goodsCompany/updateGoodsCompany", haha.updateGoodsCompanyInfo, function(backData) {
                            if (backData.code == 1) {
                                haha.$notify.success({
                                    title: '温馨提示',
                                    message: backData.msg
                                });
                                haha.updateGoodsCompanyVisible = false;
                                getInfo(1, 10);
                            } else {
                                haha.$notify.error({
                                    title: '温馨提示',
                                    message: backData.msg
                                });
                            }
                        })
                    }
                });
            },
            showUpdateGoodsCompanyDlog: function(a) {
                //获取当前信息
                $.get("/cai/goodsCompany/getGoodsCompany/" + a, function(backData) {
                        haha.updateGoodsCompanyInfo = backData.data;
                        haha.updateGoodsCompanyVisible = true;
                })
            },
            searchData: function() {
                getInfo(1, 10);
            },
            handleCurrentChange: function(val) {
                getInfo(val, 10);
            },
            showAddGoodsCompanyDlog: function() {
                    haha.addGoodsCompanyVisible = true;
                    haha.$refs["goodsCompanyInfo"].resetFields();

            },
            addGoodsCompany: function() {
                haha.$refs["goodsCompanyInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/goodsCompany/addGoodsCompany", haha.goodsCompanyInfo, function(backData) {
                            if (backData.code == 1) {
                                haha.$notify.success({
                                    title: '温馨提示',
                                    message: backData.msg
                                });
                                haha.addGoodsCompanyVisible = false;
                                getInfo(1, 10);
                            } else {
                                haha.$notify.error({
                                    title: '温馨提示',
                                    message: backData.msg
                                });
                            }
                        })
                    }
                });
            }
        }
    });
    //a页码 b 数量
    function getInfo(a, b) {
        haha.info.pageNo = a;
        haha.info.pageCount = b;

        $.post("/cai/goodsCompany/list", haha.info, function(backData) {
            haha.goodsCompanyArr = backData.data.currentPageData;
            haha.pageTotal = backData.data.currentDataTotal;
        });
    }
    getInfo(1, 10);
</script>
</body>
</html>
